<template>
    <div class="articles-container">
        <ArticleItem v-for="(article, i) in articles" :key="i" :article="article"></ArticleItem>
        <el-pagination
                align="right" background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[ 5, 10, 15]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import ArticleItem from "../components/ArticleItem";
    import event from "../plugins/event";

    export default {
        components: {
            ArticleItem
        },
        data() {
            return {
                articles: [],
                page: 1,
                size: 5,
                total: 0
            };
        },
        created() {
            console.log(this.$store.state.user);
            this.getArticle();
        },
        mounted() {
            event.$on('onsearch', (keyword) => {
                console.log(keyword);
                this.getArticle(keyword);
            })
        },
        methods: {
            async getArticle(keyword) {
                let res = await this.$http.get("/article", {params: {page: this.page, size: this.size, keyword}});
                this.articles = res.data.list;
                this.total = res.data.count;
            },
            handleSizeChange(size) {
                this.size = size;
                this.getArticle()
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getArticle()
            }
        }
    };
</script>

<style lang="less" scoped>

</style>
